<template>
  <view class="product-carousel">
    <view class="font-32 text-bold rel m-r-20 flex-y-center m-b-24">
      推荐商品
      <text class="lines"></text>
      <!-- <view class="font-24 c-78 m-l-20">平台推荐热销产品</view> -->
      <view class="flex-y-center font-24 c-78 m-l-auto" @click="goGoodsList()" v-if="isShow">
        更多
        <u-icon name="arrow-right" color="#788096" size="14"></u-icon>
      </view>
    </view>
    
    <view class="carousel-container" @touchstart="starts" @touchend="ends">
      <view 
        v-for="(item, index) in imagelist" 
        :key="index" 
        class="carousel-block" 
        @click="changeBlock(item)"
        :style="{ 
          left: item.left, 
          top: item.top, 
          zIndex: item.zIndex, 
          width: item.width, 
          transition: item.transition + 's all'
        }">
        <view class="product-item">
          <image class="product-image" :src="$util.img(item.product.goods_image)" mode="aspectFill" 
            lazy-load
            :style="{
              width: '100%',
              height: item.width
            }"
          />
          <view class="product-info">
            <view class="product-name ellipsis">{{item.product.goods_name}}</view>
            <view class="flex-between">
              <view class="font-32 text-bold c-origin flex-y-baseline"><text class="font-20">¥</text>{{item.product.price}}</view>
              <view class="font-24 c-89" v-if="item.width !== '188rpx'">已售{{item.product.sale_num}}件</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    productList: {
      type: Array,
      default: () => []
    },
    mode: {
      type: String,
      default: 'multiple'
    },
    field:{
			type:String,
			default:''
	},
	isShow: {
		type: Number,
		default: 1
	},
  },
  data() {
    return {
      datalist: [],
      imagelist: [],
      ismove: 0,
      count: {sta: 0, end: 0},
      style_multiple: [
        {left: '10rpx', top: '90rpx', height: '380rpx', width: '188rpx', zIndex: 10, transition: 0.2},
        {left: 'calc(25% - 129rpx)', top: '50rpx', height: '400rpx', width: '258rpx', zIndex: 15, transition: 0.4},
        {left: 'calc(50% - 169.5rpx)', top: '10rpx', height: '420rpx', width: '339rpx', zIndex: 20, transition: 0.5},
        {left: 'calc(75% - 129rpx)', top: '50rpx', height: '400rpx', width: '258rpx', zIndex: 15, transition: 0.4},
        {left: 'calc(100% - 198rpx)', top: '90rpx', height: '380rpx', width: '188rpx', zIndex: 10, transition: 0.2}
      ],
      style_single: [
        {left: '10rpx', top: '50rpx', height: '400rpx', width: '258rpx', zIndex: 15, transition: 0.1},
        {left: 'calc(50% - 169.5rpx)', top: '10rpx', height: '420rpx', width: '339rpx', zIndex: 20, transition: 0.3},
        {left: 'calc(100% - 268rpx)', top: '50rpx', height: '400rpx', width: '258rpx', zIndex: 15, transition: 0.1}
      ],
      autoPlayTimer: null,
      autoPlayInterval: 2000
    }
  },
  created() {
    this.getDatalist()
  },
  mounted() {
    this.startAutoPlay()
  },
  beforeDestroy() {
    this.stopAutoPlay()
  },
  methods: {
    goGoodsList() {
      this.$util.redirectTo('/otherpages/mall/index')
      // this.$util.redirectTo('/otherpages/mall/list?title='+'推荐商品'+'&category_id=0'+'&is_recommend='+1)
    },
    getDatalist() {
      // console.log("productList",this.productList)
      if (this.productList) {
        // console.log("productList",this.productList)
        this.datalist = JSON.parse(JSON.stringify(this.productList))
        // console.log("datalist",this.datalist)
        let num = this.mode === 'multiple' ? 5 : this.mode === 'single' ? 3 : 0
        let diff = num - this.productList.length
        if (diff > 0) {
          for(let i=0;i<diff;i++){
							let obj = {}
							obj[this.field] = ''
							this.datalist.push(obj)
					}
        }
        this.getImagelist()
      }
    },
    getImagelist() {
      if (this.mode === 'multiple') {
        this.imagelist = JSON.parse(JSON.stringify(this.style_multiple))
        this.count.sta = 0
        this.count.end = 4
      } else if (this.mode === 'single') {
        this.imagelist = JSON.parse(JSON.stringify(this.style_single))
        this.count.sta = 0
        this.count.end = 2
      }
      console.log("datalist",this.datalist)
      for (let i = 0; i < this.datalist.length; i++) {
        if (this.imagelist[i]) {
          this.imagelist[i].product = this.datalist[i]
          this.imagelist[i].isIndex = i
          this.imagelist[i].isToor = i
        } else {
          break
        }
      }
      // console.log("imagelist",this.imagelist)
    },
    goToDetail(item) {
      if (item.sku_id) {
        this.$util.redirectTo('/otherpages/mall/detail?sku_id='+item.sku_id)
      }
    },
    starts(e) {
      this.ismove = e.touches[0].pageX
    },
    ends(e) {
      let pageX = e.changedTouches[0].pageX
      let nums = this.ismove - pageX
      if (nums > 50) {
        this.LeftSliding()
      } else if (nums < -50) {
        this.RightSliding()
      }
    },
    changeBlock(item) {
      let toor = item.isToor
      if (this.mode === 'multiple') {
        if (toor === 0 || toor === "0") {
          this.RightSliding()
          setTimeout(() => {
            this.RightSliding()
          }, 100)
        } else if (toor === 1) {
          this.RightSliding()
        } else if (toor === 2) {
          this.goToDetail(this.datalist[item.isIndex])
        } else if (toor === 3) {
          this.LeftSliding()
        } else if (toor === 4) {
          this.LeftSliding()
          setTimeout(() => {
            this.LeftSliding()
          }, 100)
        }
      } else if (this.mode === 'single') {
        if (toor === 0 || toor === "0") {
          this.RightSliding()
        } else if (toor === 1) {
          this.goToDetail(this.datalist[item.isIndex])
        } else if (toor === 2) {
          this.LeftSliding()
        }
      }
    },
    LeftSliding() {
      let list = this.mode === 'multiple' ? this.style_multiple : this.mode === 'single' ? this.style_single : []
      this.imagelist.forEach(item => {
        let toor = (item.isToor - 1) < 0 ? this.imagelist.length - 1 : item.isToor - 1
        item.isToor = toor
        item.transition = list[toor].transition
        item.left = list[toor].left
        item.top = list[toor].top
        item.width = list[toor].width
        item.height = list[toor].height
        item.zIndex = list[toor].zIndex
        if ((toor === 4 && this.mode === 'multiple') || (toor === 2 && this.mode === 'single')) {
          this.count.end = (this.count.end + 1) > this.datalist.length - 1 ? 0 : this.count.end + 1
          item.isIndex = this.count.end
          item.product = this.datalist[this.count.end]
        }
        if (toor === 0) {
          this.count.sta = item.isIndex
        }
      })
	  // console.log("imageList",this.imagelist)
    },
    RightSliding() {
      let list = this.mode === 'multiple' ? this.style_multiple : this.mode === 'single' ? this.style_single : []
      this.imagelist.forEach(item => {
        let toor = (item.isToor + 1) > this.imagelist.length - 1 ? 0 : item.isToor + 1
        item.isToor = toor
        item.transition = list[toor].transition
        item.left = list[toor].left
        item.top = list[toor].top
        item.width = list[toor].width
        item.height = list[toor].height
        item.zIndex = list[toor].zIndex
        if (toor === 0) {
          this.count.sta = (this.count.sta - 1) < 0 ? this.datalist.length - 1 : this.count.sta - 1
          item.isIndex = this.count.sta
          item.product = this.datalist[this.count.sta]
        }
        if ((toor === 4 && this.mode === 'multiple') || (toor === 2 && this.mode === 'single')) {
          this.count.end = item.isIndex
        }
      })
    },
    // 自动轮播
    startAutoPlay() {
      this.stopAutoPlay()
      this.autoPlayTimer = setInterval(() => {
        this.LeftSliding()
      }, this.autoPlayInterval)
    },
    stopAutoPlay() {
      if (this.autoPlayTimer) {
        clearInterval(this.autoPlayTimer)
        this.autoPlayTimer = null
      }
    },
    // 调试方法，用于验证商品位置
    logPositions() {
      console.log('Current positions:')
      this.positions.forEach((pos, i) => {
        console.log(`Item ${i}: left=${pos.left}, top=${pos.top}, zIndex=${pos.zIndex}`)
      })
      console.log(`Current selected index: ${this.currentIndex}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.product-carousel {
  margin: 24rpx 24rpx 0;
  
  .carousel-container {
    position: relative;
    height: 480rpx; /* 增加容器高度适应新布局 */
    width: 100%;
    margin: 0 auto 44rpx;
    
    .carousel-block {
      position: absolute;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
      background: #fff;
      
      .product-item {
        width: 100%;
        height: 100%;
        
        .product-image {
          width: 100%;
          height: 180rpx;
          display: block;
        }
        
        .product-info {
          padding: 10rpx 20rpx;
          
          .product-name {
            color: #1F2127;
          }
         
        }
      }
    }
  }
}

.lines {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 112rpx;
  height: 18rpx;
  border-radius: 4rpx;
  opacity: 0.7;
  background: linear-gradient(90deg, #FF8F33 0%, #ffffff00 100%);
}
</style>